<!-- src/components/AppHeader.vue -->
<template>
    <header class="app-header">
      <div class="header-content">
        <div class="logo" @click="handleLogoClick">
          <van-icon name="apps-o" size="24" />
          <span class="logo-text">ERP系统</span>
        </div>
        <van-icon 
          name="logout" 
          size="20" 
          class="logout-btn" 
          @click="$emit('logout')" 
        />
      </div>
    </header>
  </template>
  
  <script setup>
  import { Icon as VanIcon } from 'vant'
  
  const handleLogoClick = () => {
    // 可以添加点击logo的逻辑，比如返回首页
  }
  </script>
  
  <style scoped>
  .app-header {
    background-color: var(--van-primary);
    color: white;
    padding: 0 16px;
    height: 56px;
    display: flex;
    align-items: center;
  }
  
  .header-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .logo {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 8px;
  }
  
  .logo-text {
    font-size: 18px;
    font-weight: bold;
  }
  
  .logout-btn {
    cursor: pointer;
  }
  </style>